<template>
  <div class="left-box">
    <div class="tip-box">
      <commonItemTitleV2 title="科室业务实时监控"></commonItemTitleV2>
    </div>
    <div class="department-box" v-for="(item, index) in data" :key="index" >
      <div class="msgIitem-title">{{ item.sectionName }}</div>
      <div class="msgTable-box">
        <div class="table-th">
          <div
            class="cloumn-box"
            :class="{
              cloumn1: index === 0,
              cloumn2: index === 1,
              cloumn3: index === 2,
              cloumn4: index === 3,
            }"
            v-for="(item, index) in cloumnList"
            :key="index"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="table-tb">
          <vue3ScrollSeamless
            class="scroll-wrap"
            :classOptions="listScrollOptions[index]"
            :dataList="item.businessTypeStatsList"
            v-if="listScrollOptions[index].limitMoveNum !== 1000"
          >
            <commonTableTb
              :tableData="item.businessTypeStatsList"
            ></commonTableTb>
          </vue3ScrollSeamless>
          <commonTableTb
            :tableData="item.businessTypeStatsList"
            v-else
          ></commonTableTb>
        </div>
      </div>
    </div>
    <!-- <div class="department-box">
      <div class="msgIitem-title">综合业务三科</div>
      <div class="msgTable-box">
        <div class="table-th">
          <div
            class="cloumn-box"
            :class="{
              cloumn1: index === 0,
              cloumn2: index === 1,
              cloumn3: index === 2,
              cloumn4: index === 3,
            }"
            v-for="(item, index) in cloumnList"
            :key="index"
          >
            {{ item.title }}
          </div>
        </div>
        <vue3ScrollSeamless
          class="scroll-wrap"
          :classOptions="listScrollOptions"
          :dataList="tableData2"
          v-if="listScrollOptions.singleHeight > 0"
        >
          <commonTableTb :tableData="tableData2"></commonTableTb>
        </vue3ScrollSeamless>
        <commonTableTb :tableData="tableData2" v-else></commonTableTb>
      </div>
    </div>
    <div class="department-box">
      <div class="msgIitem-title">综合业务四科</div>
      <div class="msgTable-box">
        <div class="table-th">
          <div
            class="cloumn-box"
            :class="{
              cloumn1: index === 0,
              cloumn2: index === 1,
              cloumn3: index === 2,
              cloumn4: index === 3,
            }"
            v-for="(item, index) in cloumnList"
            :key="index"
          >
            {{ item.title }}
          </div>
        </div>
        <vue3ScrollSeamless
          class="scroll-wrap"
          :classOptions="listScrollOptions"
          :dataList="tableData3"
          v-if="listScrollOptions.singleHeight > 0"
        >
          <commonTableTb :tableData="tableData3"></commonTableTb>
        </vue3ScrollSeamless>
        <commonTableTb :tableData="tableData3" v-else></commonTableTb>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from "vue";
import commonItemTitleV2 from "../../../components/commonItemTitleV2.vue";
import commonTableTb from "../../../components/commonTableTb.vue";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";
const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
});
const fixNum = ref(6);
const listScrollOptions = ref([
  // {
  //   // singleHeight: 0,
  //   limitMoveNum: 10000,
  //   step: 0.5,
  // },
]);

watch(
  () => props.data,
  (newVal) => {
    if (newVal.length > 0) {
      setLimitMoveNum();
    }
  }
);
const setLimitMoveNum = () => {
  listScrollOptions.value = [];
  props.data.forEach((item, idx) => {
    listScrollOptions.value.push({
      limitMoveNum: 1000,
      step: 0.5,
    });
    let count = 0;
    item.businessTypeStatsList.forEach((itemC, idxC) => {
      count += itemC.roleStatsList.length;
    });
    console.log("listScrollOptions", listScrollOptions.value);
    if (count >= fixNum.value) {
      setTimeout(() => {
        listScrollOptions.value[idx].limitMoveNum = item.businessTypeStatsList.length;
        console.log("listScrollOptions1", listScrollOptions.value);
      }, 2000);
    }
  });
};

const cloumnList = ref([
  {
    title: "业务类型",
  },
  {
    title: "岗位",
  },
  {
    title: "工作量",
  },
  {
    title: "在线关员",
  },
]);

const renderScrollFun = (idx) => {
  let ele = document.getElementsByClassName("tableItemR");
  let scroll1 = ele[0]?.offsetHeight;
  [listScrollOptions.value][idx].singleHeight = scroll1 ? scroll1 : 0;
};
const resizeRender = () => {
  // listScrollOptions.value.singleHeight = 0;
  // setTimeout(() => {
  //   renderScrollFun();
  // }, 2000);
  setLimitMoveNum();
};
onMounted(() => {
  // nextTick(() => {
  //   setTimeout(() => {
  //     renderScrollFun();
  //   }, 2000);
  // });
});
defineExpose({
  resizeRender,
});
</script>

<style scoped lang="scss">
.left-box {
  padding: 15px 18px 25px 16px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(22, 99, 163, 0.2);
  border-radius: 8px 8px 8px 8px;
  // .tip-box {
  // }
  .msgIitem-title {
    margin: 14px 0 10px 0;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    color: #298bff;
  }
  .msgTable-box {
    height: 242px;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;

    .table-th {
      display: flex;
      align-items: center;
      height: 36px;
      background: #ecf7ff;
      .cloumn-box {
        padding: 0 8px;
        box-sizing: border-box;
        font-size: 14px;
      }
    }
    .table-tb {
      height: 214px;
      border: 1px solid #e5e5e5;
      border-top: 0;
      overflow: hidden;
      // overflow-y: scroll;
      .scroll-wrap {
        height: 214px;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
      }
    }
    .cloumn1 {
      width: 100px;
    }
    .cloumn2 {
      width: 100px;
    }
    .cloumn3 {
      width: 77px;
      // flex: 1;
    }
    .cloumn4 {
      // flex: 1;
      width: 76px;
    }
  }
}
</style>
